<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-eqQiaoNanv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="https://unpkg.com/qiaonan@1.1.3/dist/css/style.css"> -->
    <title>QiaoNan</title>
    <style>
        button {
            margin: 5px;
            padding: 5px;
            border: solid 1px rgb(84, 230, 166);
            background: rgb(83, 230, 205);
            cursor: pointer;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <!-- <script src="https://unpkg.com/qiaonan@1.1.3/dist/index.js"></script> -->
    <div>
        <button class="one">成功</button>
        <button class="one">警告</button>
        <button class="one">提示</button>
        <button class="one">失败</button>
        <br>
        <button class="two">成功--显示关闭按钮</button>
        <button class="two">警告--显示关闭按钮</button>
        <button class="two">提示--显示关闭按钮</button>
        <button class="two">失败--显示关闭按钮</button>
        <br>
        <button class="ld">显示loading</button>
        <button class="ld">显示全屏loading 占用一个元素</button>
        <br>
        <button class="ul">上传文件</button>
        <br>
        <button class="confirm">warning确认框</button>
        <button class="confirm">success确认框</button>
        <button class="confirm">info确认框</button>
        <button class="confirm">error确认框</button>
        <button class="previewImage">预览图片</button>
    </div>
    <!-- <script src="./index.js" type="module"></script> -->
    <script>
        /* QiaoNan变量是 文件种暴露出来的模块 */
        // 第一种
        let btnsOne = document.getElementsByClassName('one');
        [...btnsOne].forEach((item, index) => {
            if (index == 0) {
                item.addEventListener('click', () => {
                    QiaoNan.Message.success("成功");
                })
            }
            if (index == 1) {
                item.addEventListener('click', () => {
                    QiaoNan.Message.warning("警告");
                })
            }
            if (index == 2) {
                item.addEventListener('click', () => {
                    QiaoNan.Message.error("失败");
                })
            }
            if (index == 3) {
                item.addEventListener('click', () => {
                    QiaoNan.Message.info("info");
                })
            }
        });
        // 第二种 duration为显示时间 值为0为永不关闭
        let btnsTwo = document.getElementsByClassName("two");
        [...btnsTwo].forEach((item, index) => {
            if (index == 0) {
                item.addEventListener('click', () => {
                    QiaoNan.Message.success({ message: "成功对象配置", duration: 0, showClose: true });
                })
            }
            if (index == 1) {
                item.addEventListener('click', () => {
                    QiaoNan.Message.warning({ message: "警告对象配置", duration: 0, showClose: true });
                })
            }
            if (index == 2) {
                item.addEventListener('click', () => {
                    QiaoNan.Message.error({ message: "失败对象配置", duration: 0, showClose: true });
                })
            }
            if (index == 3) {
                item.addEventListener('click', () => {
                    QiaoNan.Message.info({ message: "提示对象配置", duration: 0, showClose: true });
                })
            }
        })

        let loading = document.getElementsByClassName('ld')[0];
        let fullLoading = document.getElementsByClassName('ld')[1];
        loading.addEventListener('click', () => {
            let ld = QiaoNan.Loading.service({
                text: "页面加载中..."
            })
            // 2s后关闭
            setTimeout(() => {
                ld.close();
                QiaoNan.Message.success("加载成功");
            }, 2000);
        })
        // 全部loading 占用一个元素
        fullLoading.addEventListener('click', () => {
            let ld1 = QiaoNan.Loading.service({
                text: "页面加载中...",
                fullscreen: true,
            })
            let ld2 = QiaoNan.Loading.service({
                text: "页面加载中...",
                fullscreen: true,
            })
            let ld3 = QiaoNan.Loading.service({
                text: "页面加载中...",
                fullscreen: true,
            })
            // 2s后关闭
            setTimeout(() => {
                ld1.close();
                ld2.close();
                ld3.close();
                QiaoNan.Message.success("加载成功")
            }, 2000);
        })

        let upload = document.getElementsByClassName('ul')[0]
        upload.addEventListener('click', () => {
            QiaoNan.Upload({
                url: "https://jsonplaceholder.typicode.com/posts/",
                onSuccess() {
                    console.log("上传成功")
                },
                onError() {
                    console.log('失败')
                }
            })
        })

        let cf = document.getElementsByClassName('confirm');

        [...cf].forEach((item, index) => {
            if (index == 0) {
                item.addEventListener('click', () => {
                    QiaoNan.Confirm('提示', "确定退出吗", {
                        type: "warning",//success error info
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                    }).then(() => {
                        QiaoNan.Message({
                            type: "success",
                            message: '提交成功'
                        })
                    }).catch(() => {
                        QiaoNan.Message({
                            type: "warning",
                            message: '取消'
                        })
                    })
                })

            }
            if (index == 1) {
                item.addEventListener('click', () => {
                    QiaoNan.Confirm('提示', "确定退出吗", {
                        type: "success",//success error info
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        beforeClose(buttonText, instance, next) {
                            console.log(instance)
                            if (buttonText == 'cancel') {
                                next();
                                return
                            }
                            if (buttonText == 'confirm') {
                                instance.confirmButtonText = '正在加载中···';
                                instance.confirmDisable = true;
                                setTimeout(() => {
                                    instance.confirmButtonText = '确定';
                                    instance.confirmDisable = false;
                                    next();
                                }, 3000);
                            }
                        }
                    }).then(() => {
                        QiaoNan.Message({
                            type: "success",
                            message: '提交成功'
                        })
                    }).catch(() => {
                        QiaoNan.Message({
                            type: "warning",
                            message: '取消'
                        })
                    })
                })

            }
            if (index == 2) {
                item.addEventListener('click', () => {
                    QiaoNan.Confirm('提示', "确定退出吗", {
                        type: "info",//success error info
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                    }).then(() => {
                        QiaoNan.Message({
                            type: "success",
                            message: '提交成功'
                        })
                    }).catch(() => {
                        QiaoNan.Message({
                            type: "warning",
                            message: '取消'
                        })
                    })
                })

            }
            if (index == 3) {
                item.addEventListener('click', () => {
                    QiaoNan.Confirm('提示', "确定退出吗", {
                        type: "error",//success error info
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                    }).then(() => {
                        QiaoNan.Message({
                            type: "success",
                            message: '提交成功'
                        })
                    }).catch(() => {
                        QiaoNan.Message({
                            type: "warning",
                            message: '取消'
                        })
                    })
                })

            }
        });


        let previewImageBtn = document.getElementsByClassName('previewImage')[0]
        previewImageBtn.onclick = () => {
            //  可通过 p.close() 关闭预览图片
            QiaoNan.PreviewImage('https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500', {
                list:[
                    "https://www.itqiche.com/uploads/20230104/2be0d1a9c3efdbc347181a5e1d999df5.png",
                    "https://www.itqiche.com/uploads/20230104/a42e7e30697667c61008148624e843d1.jpg",
                    "https://www.itqiche.com/uploads/20230104/b687d07fb8df5e0e5854457d799fdbc9.png",
                    "https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
                ]
            })
        }

    </script>

    <script>

        window.onload = () => {
            let { heart, $http } = QiaoNan;
            console.log(QiaoNan)
            // let Heart = heart();
            // function cb() {
            //     return new Promise((resolve, reject) => {
            //         fetch('https://qiaonan.info:8123/login').then(() => {
            //             console.log(222)
            //             resolve()
            //         })
            //     })
            // }
            // Heart.run(cb, 500)
            // setTimeout(() => {
            //     Heart._cancel();
            // }, 10000);

            //    setTimeout(() => {
            //         $http.get('https://qiaonan.info:8124/login').then((res) => {
            //             console.log(res)
            //         })

            //         $http.get('https://qiaonan.info:8124/login').then((res) => {
            //             console.log(res)
            //         })

            //         $http.get('https://qiaonan.info:8124/login').then((res) => {
            //             console.log(res)
            //         })

            //         $http.get('https://qiaonan.info:8124/login').then((res) => {
            //             console.log(res)
            //         })

            //         $http.get('https://qiaonan.info:8124/login').then((res) => {
            //             console.log(res)
            //         })
            //    }, 1000);

        }
    </script>
</body>

</html>